<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件下载</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4; /* 背景色 */
            border-radius: 10px; /* 圆角边框 */
        }

        h2 {
            color: #4169e1; /* 深蓝色 */
            margin-bottom: 20px;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #fff; /* 白色背景 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        th,
        td {
            padding: 15px;
            border-bottom: 1px solid #ddd; /* 分割线 */
            text-align: left;
            border-radius: 10px; /* 圆角矩形 */
            position: relative;
        }

        th {
            background-color: #4169e1; /* 深蓝色 */
            color: #fff;
        }

        td {
            background-color: #f9f9f9; /* 浅灰色背景 */
        }

        label {
            cursor: pointer;
            display: block;
            position: relative;
        }

        input[type="checkbox"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            border-radius: 10px; /* 圆角矩形 */
        }

        label span {
            position: absolute;
            top: 0;
            left: 0;
            width: 15px;
            height: 15px;
            border: 2px solid #4169e1; /* 深蓝色边框 */
            background-color: #fff; /* 白色背景 */
            border-radius: 4px; /* 调整圆角大小 */
        }

        input[type="checkbox"]:checked+span {
            background-color: #4169e1; /* 深蓝色背景 */
            border-color: #fff; /* 白色边框 */
        }

        button {
            padding: 15px 30px;
            background-color: #4169e1; /* 深蓝色 */
            color: #fff;
            border: none;
            border-radius: 10px; /* 圆角矩形 */
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 16px;
            margin-top: 20px;
        }

        button:hover {
            background-color: #1e90ff; /* 亮蓝色 */
        }

        .hidden {
            display: none;
        }

        .upload-date {
            font-size: 12px;
            color: #888;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
        }
    </style>
</head>

<body>

<h2>文件下载</h2>

<form action="download_selected.php" method="post" onsubmit="return validateForm()">
    <?php
    $uploadsDir = 'uploads/';
    $files = scandir($uploadsDir);
    if (!empty($files)) {
    ?>
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>文件名</th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($files as $file) {
                    if ($file != "." && $file != "..") {
                        $filePath = $uploadsDir . $file;
                        $uploadDate = date("Y-m-d H:i:s", filemtime($filePath));
                        echo '<tr><td><label><input type="checkbox" name="selected_files[]" value="' . $file . '" class="file-checkbox"> <span></span></label></td><td class="file-name">' . $file . '<div class="upload-date">' . $uploadDate . '</div></td></tr>';
                    }
                }
                ?>
            </tbody>
        </table>
        <button type="submit" id="downloadButton" class="hidden">下载选中文件</button>
    <?php
    } else {
        echo '<p>没有可下载的文件。</p>';
    }
    ?>
</form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const fileCheckboxes = document.querySelectorAll('.file-checkbox');
            const downloadButton = document.getElementById('downloadButton');

            fileCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    updateDownloadButtonState();
                });

                const fileNameCell = checkbox.closest('tr').querySelector('.file-name');
                fileNameCell.addEventListener('click', function () {
                    checkbox.checked = !checkbox.checked;
                    updateDownloadButtonState();
                });
            });

            function updateDownloadButtonState() {
                const checkedCheckboxes = document.querySelectorAll('.file-checkbox:checked');
                if (checkedCheckboxes.length > 0) {
                    downloadButton.classList.remove('hidden');
                } else {
                    downloadButton.classList.add('hidden');
                }
            }
        });

        function validateForm() {
            const checkedCheckboxes = document.querySelectorAll('.file-checkbox:checked');
            if (checkedCheckboxes.length === 0) {
                alert('请先选择文件后再下载。');
                return false;
            }
            return true;
        }
    </script>

</body>

</html>
